<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <fieldset>
            <legend>home</legend>
            <!-- 登入之后的结构 -->
            <div class="content" v-if="isLogin">
                <ul>
                    <li v-for="(item,index) of arr" :key="index">
                        <b>{{item}}</b>
                        <button v-has:[buttons]="'add'">增加</button>
                        <button v-has:[buttons]="'edit'">编辑</button>
                        <button v-has:[buttons]="'delete'">删除</button>
                        <button v-has:[buttons]="'read'">查看</button>
                    </li>
                </ul>
            </div>
            <!-- 登入结构 -->
            <div class="login-container" v-else>
                <h1>请登入</h1>
                用户名:
                <input type="text" v-model="username">
                <br>
                密码:
                <input type="password" v-model="password" @keydown.enter="login">
                <br>
                <button @click="login">点击登入</button>
            </div>
        </fieldset>
    </div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    //按钮鉴权 管理系统中的一个功能 根据不同的角色(账号) 对应不同的按钮权限
    //需求
    //1.登入状态的切换,未登入 显示登入相关结构 登入之后显示content 按钮部分
    //2.发起请求,请求登入接口,将数据设置到vue里面
    //3.通过自定义指令,实现按钮级别的鉴权

    //登入的接口地址:http://chst.vip/users/login
    //请求方式:post

    //参数:username password

    //请求头是 "content-type":"application/json"

    //一个账号:lbw 555 低权限  
    // admin admin 高权限

    let vm = new Vue({
        el: "#app",
        data: {
            username: "",//用户名
            password: "",//密码
            isLogin: false,//定义是否登入
            arr: ["写代码", "改Bug", "改bug2", "睡觉"],
            buttons: [] //按钮权限
        },
        directives: {
            has: { //自定义指令,控制按钮
                inserted(el, binding) {
                    console.log(el)
                    console.log(binding)
                    //判断用户的权限数组(buttons) 是否包含 binding.value(需要具备的权限)
                    //包含就展示 不包含就移除
                    //this获取不到当前实例
                    //数组的includes方法
                    let hasPermission = binding.arg.includes(binding.value)
                    if(!hasPermission){
                        el.parentNode.removeChild(el) //没有权限就把当前按钮移除掉
                    }
                }
            }
        },
        methods: {
            async login() {
                //获取输入框的内容
                console.log(this.username)
                console.log(this.password)
                //发起请求

                //数据对象 传给后台
                let body = {
                    username: this.username,
                    password: this.password
                }

                //用fetch发起请求
                //登入请求
                let result = await fetch("http://chst.vip/users/login", {
                    method: 'post',
                    body: JSON.stringify(body),
                    headers: {
                        "content-type": "application/json"
                    }
                }).then(body => body.json())

                // console.log(result)

                //将数据进行解构

                let { state, permission: { buttons } } = result;

                if (state) {
                    //登入成功

                    //将登入状态变为true
                    this.isLogin = true;
                    //buttons是后台返回的用户的按钮的求安县
                    this.buttons = buttons;
                }

            }
        }
    })
</script>